<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: 10171225
  Date: 2016/5/24
  Time: 9:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页内容</title>
    <link rel="stylesheet" href="static/themes/bootstrap/easyui.css">
    <link rel="stylesheet" href="static/css/base.css">
    <script src="static/javascript/jquery-1.11.3.min.js"></script>
    <script src="static/javascript/jquery.easyui.min.js"></script>
    <script src="static/javascript/utils.js"></script>
    <script src="static/javascript/base.js"></script>

    <link rel="stylesheet" href="plugins/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="plugins/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css">
    <script src="plugins/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <style type="text/css">
        .scrollNews{
            width:200px;
            height:20px;
            line-height:20px;
            overflow:hidden;
            background:#FFFFFF;
        }

        .scrollNews li{
            height:20px;
        }
    </style>

    <script type="text/javascript" language="JavaScript">
        function drawTagBackground(){
            $(".tag").each(function (){
                if ($(this).text().indexOf("篮球") != -1){
                    $(this).css("color","blue");
                } else if ($(this).text().indexOf("红球") != -1) {
                    $(this).css("color","red");
                }
            });
        }
        function slideNotice(){
            var $this=$("#notice");
            var scrollTimer;
            $this.hover(function(){
                clearInterval(scrollTimer);
            },function(){
                scrollTimer = setInterval(function() {
                    scrollNews($this);
                }, 2000);
            }).trigger("mouseleave");
            function scrollNews(obj)
            {
                var $self=obj.find("ul");
                var lineHeight=$self.find("li:first").height();
                $self.animate({
                    "marginTop":-lineHeight+ "px"
                }, 600, function(){
                    $self.css({
                        marginTop:0
                    }).find("li:first").appendTo($self);
                })
            }
        }

        $(document).ready(function(){
            drawTagBackground();
            slideNotice();

            $("#notice a").click(function () {
                value = $(this).attr("name");
                obj=$.ajax({url:"notice/show?noticeId=" + value,async:false});
                $("#main").html(obj.responseText);
            });
            $(".articleList .showArticle").click(function () {
                obj=$.ajax({url:"article/show?articleId=" + $(this).attr("name"),async:false});
                $("#main").html(obj.responseText);
            });
            $("#top30").click(function () {
                obj=$.ajax({url:"indexContent?maxArticleSize=30",async:false});
                $("#main").html(obj.responseText);
                $("#topSizePanel button").css("background-color","lightgrey");
                $("#top30").css("background-color","skyblue");
            });
            $("#top50").click(function () {
                obj=$.ajax({url:"indexContent?maxArticleSize=50",async:false});
                $("#main").html(obj.responseText);
                $("#topSizePanel button").css("background-color","lightgrey");
                $("#top50").css("background-color","skyblue");
            });
            $("#top100").click(function () {
                obj=$.ajax({url:"indexContent?maxArticleSize=100",async:false});
                $("#main").html(obj.responseText);
                $("#topSizePanel button").css("background-color","lightgrey");
                $("#top100").css("background-color","skyblue");
            });

        });
    </script>
</head>
<body>
    <div>
        <div id="notice" class="scrollNews">
            <ul>
                <c:forEach items="${notices}" var="notice" varStatus="vs">
                    <li>公告：<a name="${notice.id}">${notice.title}</a></li>
                </c:forEach>
            </ul>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6">
                <p>双色球 第${latestBall.issue}期 开奖日期：<spring:eval expression="latestBall.drawDate"></spring:eval></p>
                <p>红球：${latestBall.redOne} ${latestBall.redTwo} ${latestBall.redThree} ${latestBall.redFour} ${latestBall.redFive} ${latestBall.redSix} 篮球：${latestBall.blue}</p>
                <div class="row">
                    <div class="col-xs-7 col-sm-7 col-md-7">
                        <table class="table-bordered">
                            <tr>
                                <th>奖项</th>
                                <th>中奖注数</th>
                                <th>单注奖金</th>
                                <th>中奖条件</th>
                            </tr>
                            <c:forTokens items="${latestBall.prizeInfo}" delims="$" var="line">
                                <tr>
                                    <c:forTokens items="${line}" delims=";" var="item">
                                        <td><c:out value="${item}"/></td>
                                    </c:forTokens>
                                </tr>
                            </c:forTokens>
                        </table>
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-5 ">
                        <h4>当前奖金池：${latestBall.currentPrizePool}</h4>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6">
                <div class="articleList">
                    <table>
                        <col span="2" width="10%"/>
                        <col span="1" width="80%"/>
                        <tr>
                            <th></th>
                            <th>标签</th>
                            <th>主题</th>
                        </tr>
                        <c:forEach items="${articles}" var="article" varStatus="vs">
                            <tr>
                                <td>
                                    <c:if test="${article.isTop == 1}"><img src="static/images/top.gif"></c:if>
                                    <c:if test="${article.isTop == 0}"><img src="static/images/common.gif"></c:if>
                                </td>
                                <td>
                                    <span class="tag">[${article.tag}]</span>
                                </td>
                                <td>
                                    <a class="showArticle" name="${article.id}">${article.title}</a>
                                </td>
                            </tr>
                        </c:forEach>
                    </table>
                    <div id="topSizePanel" align="right">
                        <button id="top30">&lt;30</button>
                        <button id="top50">&lt;50</button>
                        <button id="top100">&lt;100</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
